<template>
    <el-dialog v-model="dialogUserVisible" title='用户信息' width="500px" center draggable>
        <el-container>
            <el-aside width="200px">
                <el-avatar shape="square" :size="120" :src="userData.image_url" />
            </el-aside>
            <el-main>
                <div>账号：{{ userData.account }}</div>
                <div>姓名：{{ userData.name }}</div>
                <div>性别：{{ userData.sex }}</div>
                <div>部门：{{ userData.department }}</div>
                <div>邮箱：{{ userData.email }}</div>
                <div>状态：
                    <span v-if="userData.status == 0">正常</span>
                    <span v-else>冻结</span>
                </div>
            </el-main>
        </el-container>
        <el-footer>
            <span @click="openEdit(userData)">编辑</span>
            <span @click="openPromote(userData.id)">赋权</span>
            <el-popconfirm :title="`确定删除${userData.account},此操作会将不能再进行登录`" width="220px"
                @confirm="openDelete(userData.id)">
                <template #reference>
                    <el-button type="danger">删除</el-button>
                </template>
            </el-popconfirm>
        </el-footer>
    </el-dialog>
    <promote ref="promoteRef" @success="success"></promote>
    <edituser ref="edituserRef" @success="success"></edituser>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import promote from './promote.vue'
import edituser from './edit_user.vue'
import {deleteUser} from '@/api/userinfo/index'
import { ElMessage } from "element-plus"
import { tracking } from '@/utils/operation'
const dialogUserVisible = ref<boolean>(false)
const userData = reactive({
    id: 0,
    account: 0,
    name: '',
    sex: '',
    department: '',
    email: '',
    status: 0,
    image_url: '',
})
const emit = defineEmits(['success','delSuccess']) // 定义 success 事件，用于操作成功后的回调
const success = () => {
    emit('success')
    dialogUserVisible.value = false
}
//编辑
const edituserRef = ref()
const openEdit = (userData: any) => {
    edituserRef.value.open(userData)
}

const promoteRef = ref()
//赋权
const openPromote = (id: number) => {
    promoteRef.value.open(id)
}
//删除
const openDelete = async(id: number) => {
    const res = await deleteUser(id)
    if(res.status == 0){
        ElMessage({
            type:'success',
            message:'删除成功'
        })
        emit('delSuccess')
        await tracking('管理员',localStorage.getItem('name'),userData.name,'高级','')
    }else{
        ElMessage({
            type:'error',
            message:'删除失败'
        })
    }
}

const open = (row: any) => {
    dialogUserVisible.value = true
    Object.assign(userData, row)
}
defineExpose({
    open
})
</script>

<style lang="scss" scoped>
.el-main>div {
    margin-bottom: 8px;
}

.el-main {
    --el-main-padding: 0px;
}

.el-footer {
    display: flex;
    justify-content: flex-end;
    --el-footer-height: 8px;

    span {
        margin-left: 8px;
        color: #409eff;
        cursor: pointer;
    }
}
</style>
